$booked-list-height: 160px;

$message-viewport-height : 365px;

.record-box {

}

.list-header {
    height: 40px;
    background: rgb(205, 205, 205);
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    color: #8b8b8b;
    text-align: center;
}


.cal-list {
    height: $booked-list-height;
}


.cal-list .cal-list-header {
    padding: 20px 0;
    font-size: 24px;
}

.cal-list .cal-booked-list-viewport {
    overflow: auto;
    padding: 0 30px;
    height: 145px;
}
//
//.cal-list section.booked {
//    position: relative;
//    cursor: pointer;
//}
//
//.cal-list section.booked .cal-booked-timeline{
//    line-height: 40px;
//    color: #999999;
//}
//
//.cal-list section.booked .cal-booked-timeline.active {
//    color: #f6bf50;
//}
//
//
//.cal-list section.booked:before {
//    content: '';
//    display: block;
//    height: 60%;
//    border-left: 1px dashed #d2d2d2;
//    position: absolute;
//    margin-left: -21px;
//    top: 12px;
//}
//
//.cal-list section.booked:after {
//    content: '•';
//    display: block;
//    position: absolute;
//    top: -1px;
//    left: -26px;
//    font-size: 30px;
//}
//
//.cal-booked-table-wrap {
//    border-radius: 6px;
//    border: 1px solid white;
//    box-shadow: 0px 0px 7px 0px #ececec;
//    background-color: rgb(255, 255, 255);
//    margin: 10px;
//    padding: 5px;
//}
//
//.cal-booked-table-wrap > table {
//    width: 100%;
//    color: #7d7d7d;
//    font-size: 12px;
//    margin: 0px 0 0 4px;
//    line-height: 21px;
//
//    th {
//        width: 10%;
//    }
//
//    td{
//        width: 17%;
//    }
//}
//
//.booked-avatar-wrap {
//    overflow: hidden;
//    width: 66px;
//    height: 66px;
//    background: #dcdee1;
//    padding: 2px;
//}
//
//.booked-avatar-wrap > img {
//    float: left;
//    width: 20px;
//    height: 20px;
//    margin: 1px;
//}
//
//.cal-list section.booked label {
//    font-weight: bold;
//}
//
//
//.cal-list section.booked:hover .cal-booked-timeline,
//.cal-list section.booked:hover:after
//{
//    color: #ff9900;
//}
//
//.cal-list section.booked:hover .cal-booked-table-wrap {
//    border: 1px solid rgb(255, 225, 172);
//    box-shadow: 0px 0px 7px 0px rgba(219, 140, 0, 0.38);
//}
//
//.cal-list section.booked:hover .btn {
//    border-color: #ff9900;
//    color: #ff9900;
//}
//
//
//.cal-list section.booked .btn:hover {
//    background: #ff9900;
//    color: white;
//}

.app-booked{
  display: block;
  margin: 8px;
}

.message-viewport {
    background: white;
    margin: 10px;
    padding: 10px 0;
}

.message-viewport .message-viewer {
    padding: 17px 0;
    overflow: auto;
    height: $message-viewport-height;
    margin: 0 auto;
}

.message-item {
    padding: 23px;
}
.message-item > table {
    width: 100%;
    table-layout: fixed;
}

.message-item .message-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto; 

    img {
        width: 100%; height: 100%;
    }
}

.message-item .message-time {
    color: #ccc;
    font-size: 12px;
}

.message-item.mine .message-time {
    text-align: right;
}

.message-item .message-text {
    display: inline-block;
    background: #F3F3F3;
    border-radius: 4px;
    font-size: 12px;
    padding: 8px;
    color: #666;
}

.message-item.mine .message-text{
    background: #ffe1e1;
}
